<template>
  <div class="world-map">
    <div ref="worldMap" class="map-wrap" id="worldMap"></div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, reactive, watch, onMounted } from 'vue'
const emit = defineEmits(['clickArea'])
import 'echarts/map/js/china.js'
import * as echarts from 'echarts'
import appData from './js/geo.json'
import { debounce } from '@/utils/ruoyi.js'
const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return [
        { name: '欧洲', value: 183.62, value2: '1212', schoolList: [] },
        { name: '亚洲', value: 999.69, value2: '1313', schoolList: [] },
        { name: '非洲', value: 200.5837, value2: '1414', schoolList: [] },
        { name: '北美洲', value: 87.63, value2: '1515', schoolList: [] },
        { name: '拉丁美洲', value: 600.41, value2: '1616', schoolList: [] },
        { name: '大洋洲', value: 0.09, value2: '1717', schoolList: [] },
      ]
    },
  },
  title: {
    type: Object,
  },
  isPhone: {
    type: Boolean,
  },
  pieces: {
    type: Array,
    default: () => {
      return [
        { lte: 0, label: '0' }, // 不指定 min，表示 min 为无限大（-Infinity）。
        { gte: 1, lte: 100, label: '1-100' },
        { gte: 101, lte: 500, label: '101-500' },
        { gte: 501, label: '>=500(单位: 万美元)' }, // 不指定 max，表示 max 为无限大（Infinity）。
      ]
    },
  },
})
let myChart = reactive({})
let curName = ref('')
let offsetWidth = ref(1200)
let offsetHeight = ref(600)
// 初始化
onMounted(() => {
  initMap()
  getWidth()
})
const initMap = () => {
  try {
    // let myChart = null
    // let appData = JSON.parse(appData)
    // appData = {
    //   ...appData,
    //   features: appData.features.slice(0, 1),
    // }
    const imgUrl = new URL(
      '../../assets/images/background-1.png',
      import.meta.url
    ).href
    echarts.registerMap('continent', appData)
    myChart = echarts.init(document.getElementById('worldMap'))
    myChart.setOption({
      // title: {
      //   top: 10,
      //   text: '消费资金分布',
      //   subtext: '',
      //   x: 'center',
      //   textStyle: {
      //     color: '#1A1A1E',
      //   },
      // },
      tooltip: {
        show: !props.isPhone,
        trigger: 'item',
        formatter: function (params) {
          let dom = `
              <div> ${
                params.data.name
              }${`(${params.data.schoolList.length}所)`} </div>
            `
          let dom2 = ''
          params.data.schoolList.slice(0, 5).forEach((v) => {
            dom2 += `<p>${v.chinaName}</p>`
          })
          // let dom3 = params.data.schoolList.length > 5 ? `<p>.....</p>` : ''
          return dom + dom2
        },
      },
      // graphic: [
      //   {
      //     type: 'image',
      //     left: 'center',
      //     top: 'center',
      //     style: {
      //       // image: require('@/assets/images/background-1.png'),
      //       image: import.meta.globEager(
      //         '../../assets/images/background-1.png'
      //       ),
      //       // image: '../../assets/images/background-1.png',
      //       // width: 130,
      //       // height: 130,
      //     },
      //   },
      // ],
      graphic: {
        elements: [
          {
            type: 'image',
            left: 'center',
            top: 'center',
            style: {
              // image: require('@/assets/images/background-1.png'),
              // image: import.meta.globEager(
              //   '../../assets/images/background-1.png'
              // ),
              image: imgUrl,
              width: offsetWidth.value,
              height: offsetHeight.value,
            },
          },
        ],
      },
      // visualMap: {
      //   bottom: '6%',
      //   left: '1%',
      //   textStyle: { color: '#73747E' },
      //   pieces: props.pieces,
      //   inRange: {
      //     // 渐变颜色，从小到大
      //     color: ['#8CBB4B', '#133891', '#F2853E', '#E82323'],
      //   },
      // },
      series: [
        {
          type: 'map',
          mapType: 'continent', // 自定義擴展圖表類型
          // zoom: props.isPhone ? 1.3 : 1.0,
          zoom: 1.1,
          aspectScale: 1.0, //长宽比
          itemStyle: {
            areaColor: '#ccc',
            borderWidth: 0,
            color: '#fff',
          },
          // 移入样式
          emphasis: {
            label: {
              color: '#fff',
            },
            itemStyle: {
              areaColor: '#79bbff',
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowOffsetX: 5,
              shadowOffsetY: 5,
              shadowBlur: 10,
            },
          },
          selectedMode: 'single',
          // 选中下的样式
          select: {
            disabled: false, //可以被选中
            label: {
              color: '#fff',
            },
            itemStyle: {
              areaColor: '#79bbff',
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowOffsetX: 5,
              shadowOffsetY: 5,
              shadowBlur: 10,
            },
          },
          data: props.data,
        },
      ],
    })
    const fnc = debounce((params) => {
      curName.value = params.data.name
      emit('clickArea', params)
    }, 200)
    myChart.on('click', fnc)
  } catch (err) {
    console.log('err', err)
  }
}

// window.addEventListener('click', (e) => {
//   console.log(e)
//   if (e.target.nodeName === 'svg') {
//     unselect(curName.value)
//   }
// })
const getWidth = () => {
  const imgBox = document.querySelector('.imgBox')
  offsetWidth.value = imgBox && imgBox.offsetWidth
  offsetHeight.value = imgBox && imgBox.offsetHeight
}
const debounceResize = debounce(() => {
  getWidth()
  initMap()
  myChart.resize()
}, 1000)
window.addEventListener('resize', debounceResize)
const unselect = (name_) => {
  myChart.dispatchAction({
    type: 'unselect',
    name: curName.value,
  })
}

defineExpose({
  unselect,
  getWidth,
})

// 不能监听响应式对象的属性值
watch(
  () => props.data,
  () => {
    initMap()
  }
)
</script>

<style  lang='scss'>
.world-map {
  width: 100%;
  height: 100%;
  .map-wrap {
    width: 100%;
    height: 100%;
  }
}
</style>
